<template>
  <div>
    <!-- 占位符 -->
    <router-view />
    
    <!-- 底部选项卡 -->
    <van-tabbar
      v-model="active"
      active-color="#FF6A00"
      inactive-color="#444">
      <van-tabbar-item icon="home-o" to="/home/index">
        <span>首页</span>
        <template #icon>
          <img :src="require(`../assets/tabs/index_${active==0?1:0}.svg`)">
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="search" to="/home/classify">
        分类
        <template #icon>
          <img src="../assets/tabs/classify_1.svg" 
               v-if="active==1" alt="" srcset="">
          <img src="../assets/tabs/classify_0.svg" 
               v-else alt="" srcset="">
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/home/shoppingcart">
        购物车
        <template #icon>
          <img src="../assets/tabs/shoppingcart_1.svg" 
               v-if="active==2" alt="" srcset="">
          <img src="../assets/tabs/shoppingcart_0.svg" 
               v-else alt="" srcset="">
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="setting-o" to="/home/me">
        我的
        <template #icon>
          <img src="../assets/tabs/me_1.svg" 
               v-if="active==3" alt="" srcset="">
          <img src="../assets/tabs/me_0.svg" 
               v-else alt="" srcset="">
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  const active = ref(0)
</script>
